<template>
    <div class="father">
      <h1>slot作用域插槽Father组件</h1>
      <h2>作用域插槽的意思是，数据在子组件里，但是结构是在父组件定义，并且父组件需要拿到字组件里的数据来渲染</h2>
      
      <!-- 第一个child组件 -->
      <Child>
        <!-- 这里的a随便写，需要知道的是这个a是Child里的slot传递来的”所有“props，是一个对象 -->
        <template v-slot="a">
          <h1>{{a.message}}</h1>
        </template>
      </Child>

      <!-- 第二个child组件 -->
      <!-- 这里相对于第一个，是把上面的"a"结构了 -->
      <Child>
        <template v-slot="{message}">
          <input type="text" :value="message">
        </template>
      </Child>

      <!-- 第三个child组件 -->
      <!-- 这里是作用域插槽和具名插槽的结合，":"后绑定插槽名字，不绑定则放在默认插槽 -->
      <Child>
        <template v-slot:slotOne="{message}" >
          <button>{{ message }}</button>
        </template>
      </Child>

      <!-- 第四个Child组件 -->
      <!-- 这里是v-slot的简写+具名插槽+作用域插槽 -->
      <Child>
        <template #slotOne="{message}" >
          <button>{{ message }}</button>
        </template>
      </Child>
    </div>
  </template>
  
  <script lang="ts" setup>
  import Child from './Child.vue'
  </script>
  
  <style scoped>
  input{
      width: 300px;
      height: 40px;
      padding: 10px;
      font-size: 20px;
    }
  </style>